<template>
  <view class="address">
    <view v-if="addressInfo">
      <view class="bgRadius addressInfo" v-for="(item,index) in addressInfo" :key="index">
        <view class="left">
          <view class="name"><text v-if="item.is_default">默认</text> {{item.name}} {{item.phone}}</view>
          <view class="value">
            {{item.province}} {{item.city}} {{item.area}} {{item.address}}
          </view>
        </view>
        <view class="flex flex-align flex-bt addressEid">
          <view class="name flex flex-align flex-bt" :class="item.is_default?'active':''" @click="selectMo"><image :src="item.is_default?'/static/address/address04.png':'/static/address/address03.png'" mode="scaleToFill" /> 默认地址</view>
          <view class="value flex flex-align ">
            <view class="btns flex flex-align " @click="editAddress(item)"><image src="@/static/address/address01.png" mode="scaleToFill" />编辑</view>
            <view class="btns flex flex-align " @click="delAddress(item.id)"><image src="@/static/address/address02.png" mode="scaleToFill" />删除</view>
          </view>
        </view>
      </view>
      <view style="height: 120rpx;"></view>
      <view class="footBont">
        <view class="addBtn"  v-if="Array.isArray(addressInfo.value) && addressInfo.value.length <= 1" @click="menuJump({is_tab: false,link: '/pages/address/jiaAddress',link_type: 1})">添加地址</view>
      </view>
    </view>
    <view class="noAddress" v-else>
      <noData acImg="/static/nodata/noaddress.png" content="暂无地址" width="360rpx" color="#323233"></noData>  
      <view class="miaoshu flex flex-align flex-center">快去添加您的收货地址吧</view>
      <view class="btns" @click="menuJump({is_tab: false,link: '/pages/address/jiaAddress?type=0',link_type: 1})">添加地址</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import noData from '@/components/noData.vue';
import { menuJump } from '@/utils/tools';
import { addressDel, addressList } from '@/api/user';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { goodStorage } from '@/utils';

const isMo = ref(false)
const selectMo = ()=>{
  isMo.value = !isMo.value
}
const addressInfo = ref<Recordable>({})
onShow(()=>{
  getAddress()
})
function getAddress() {
  addressList().then((res: any) => {
    addressInfo.value = res
  })
}
// 删除地址
function delAddress(id:number) {
  addressDel({id:id}).then((res: any) => {
    uni.showToast({
      title: '删除成功',
      icon: 'none'
    })
    getAddress()
  })
}
// 编辑地址
function editAddress(e: any) {
  goodStorage.set('routerInfo', e)
  menuJump({is_tab: false,link: '/pages/address/jiaAddress?type=1',link_type: 1})
}
</script>

<style scoped lang="scss">
.address{
  padding: 26rpx;
}
.noAddress{padding-top: 100rpx;
  .miaoshu{margin: 10rpx 0 ;color:#969799;}
  .btns{width: 288rpx;height: 80rpx;line-height: 80rpx;margin: 40rpx auto;text-align: center;color: #fff;background: #FE7431;border-radius: 80rpx;}
}
.footBont{position: fixed;bottom: 0;left: 0;width: 100%;background: #F5F6F7;padding-top: 20rpx;
height: 120rpx;
.addBtn{margin: 0 30rpx;background: #FE7431;color: #fff;border-radius: 80rpx;line-height: 80rpx;text-align: center;}
}

.addressInfo{padding: 30rpx;
  .left{
    .name{font-size: 28rpx;color: #323232;font-weight: bold;
      text{
        background: #FE7431;padding: 6rpx 15rpx;border-radius: 20rpx;color: #fff;font-size: 20rpx;
      }
    }
    .value{font-size: 26rpx;color: #969799;margin-top: 16rpx;}
  }
 .addressEid{margin-top: 20rpx;
    .name{font-size: 28rpx;
      image{width: 48rpx;height: 48rpx;margin-right: 10rpx;}
      color: #969799;
    }
    .name.active{
     color: #FE7431;font-weight: bold;
    }
   .value{
      .btns{font-size: 28rpx;
        image{width: 48rpx;height: 48rpx;margin-left: 10rpx;}
      }
      .btns:first-child{
       margin-right: 20rpx;
      }
    }
  }
}
</style>